import React, { Component, } from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import { Form, } from './common-ui/Form';
import Radio from './common-ui/Radio';
import { POST, } from '../../../commons/utils/request';
import urls from '../../../app/constants/urls';
import PersonInfo from './PersonInfo';
import BusiLicense from './BusiLicense';
import CompanyInfo from './CompanyInfo';
import Toast from '../../../components/Toast'
interface IAuthStepOneProps {
  navigation: any,
  onPress(authed): any
}
const styles = StyleSheet.create({
  container:
   {
     flex: 1,
   },
  headerButton: {
    borderRadius: 5,
    borderWidth: 3,
    borderColor: '#B0B0B0',
    backgroundColor: '#B0B0B0',
    margin: 10,
    padding: 10,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
  },
  radioContent: {
    flexDirection: "row",
    alignItems: "center",
  },
  innerStyle: {
    height: 50,
  },
});

export default class AuthStepOne extends Component<IAuthStepOneProps> {
  constructor(p) {
    super(p);
    this.state = {
      radioData: [
        { content: "公司", value: 1, disabled: false, },
        { content: "个体", value: 3, disabled: false, },
      ],
      radioPersonData: [
        { content: "法人", value: 1, disabled: false, },
        { content: "被授权人", value: 8, disabled: false, },
      ],
      filters: {
        deliveryTime: [ 'time_1', ],
        // 营业执照
        mainType: 1, // 主体类型
        userRole: 1, // 当前用户身份
      },
      validateResults: {},
      companyInfo: null,
    };
  }

  handleChangeFilter(key, value) {
    this.setState({
      filters: {
        ...this.state.filters,
        [key]: value,
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    console.log('TAGGG', `componentWillReceiveProps====AuthStepOne==${nextProps?.companyInfo}====${nextProps?.companyInfo?.mainType === 1}`);
    if (nextProps && nextProps.companyInfo) {
      this.setState({
        companyInfo: nextProps.companyInfo,
        filters: {
          ...this.state.filters,
          mainType: nextProps.companyInfo.mainType,
          userRole: nextProps.companyInfo.userRole,
        },
      });
    }
  }

  getReqParams() {
    let _filters = this.state.filters;
    console.log('TAGGG', `getReqParams====params==${_filters.mainType}`);
    if (_filters.mainType === 3) {
      let _params = this.personInfoRef.getPersonInfo();
      console.log('TAGGG', `getPersonInfo====params==${JSON.stringify(_params)}`);
      return {
        mainType: _filters.mainType,
        userRole: _filters.userRole,
        staffInfoList: [{
          ..._params,
        }]
      }
    }
    let _busi = this.busiLicenseRef.getBusiLicense();
    let _com = this.companyInfoRef.getCompanyInfo();
    let _staff = this.staffInfo.getPersonInfo();
    let _auth = this.authInfo.getPersonInfo();
    return {
      mainType: _filters.mainType,
      userRole: _filters.userRole,
      ..._busi,
      ..._com,
      staffInfoList: [{
        ..._staff,
      },{
        ..._auth,
      }]
    };
  }

  async submitData () {
    const params = this.getReqParams();
    console.log('TAGGG', `submitData====params==${JSON.stringify(params)}`);
    await POST(urls.authInfo, JSON.stringify({
      ...params,
    })).then(resp => {
      console.log('TAGGG', `upload submitData====resp==${JSON.stringify(resp)}`);
      if (resp && resp.code == 0) {
        Toast.show({ title: "认证成功", });
        this.props.onPress(true)
        this.props.navigation.navigate('Home');
      } else {
        Toast.show({ title: "认证失败," + resp.msg, });
      }
    });
  }

  renderRadioSelf() {
    return (
      <Form.Item
            style={{ paddingVertical: 13, }}
            label={
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  width: 90,
                  marginRight: 32,
                }}
              >
                <Text style={{ color: '#212121', marginRight: 2, }}>*</Text>
                <Text>您的身份为</Text>
              </View>
            }
            hasLine
          >
            <Radio
              style={styles.radioContent}
              dataOption={this.state.radioPersonData}
              options={{ value: "value", text: "content", disabled: "disabled", }}
              selectedValue={this.state.filters.userRole}
              disabledAll={false}
              innerStyle={styles.innerStyle}
              onChange={(item) => {
                this.handleChangeFilter('userRole', item.value);
                console.log('TAGGG', `upload fifle====resp==${JSON.stringify(item)}====${this.state.filters.userRole}`);
              }}
            />
          </Form.Item>
    )
  }
  // 个人申请
  renderPerson() {
    return (
      <>
      <PersonInfo ref={ref => {
        this.personInfoRef = ref
      }} 
      companyInfo={this.state.filters.mainType === 3 ? this.state.companyInfo: null}
      name={'申请人'} type={1}/>
      {/* {this.renderRadioSelf()} */}
      </>
    )
  }

  // 营业执照
  renderBusiLicense() {
    return (<BusiLicense ref={ref => {
      this.busiLicenseRef = ref
    }} 
    companyInfo={this.state.filters.mainType === 1 ? this.state.companyInfo: null}
    name={'营业执照'} />)
  }

  // 企业信息
  renderCompanyInfo() {
    return (<CompanyInfo ref={ref => {
      this.companyInfoRef = ref
    }} 
    companyInfo={this.state.filters.mainType === 1 ? this.state.companyInfo: null}
    name={'企业信息'} />)
  }


  // 法人
  renderLegal() {
    return (<PersonInfo ref={ref => {
      this.staffInfo = ref
    }} 
    companyInfo={this.state.filters.mainType === 1 ? this.state.companyInfo: null}
    name={'法人'} type={1}/>)
  }

  // 授权人
  renderAuth() {
    return (<PersonInfo ref={ref => {
      this.authInfo = ref
    }} 
    companyInfo={this.state.filters.mainType === 1 ? this.state.companyInfo: null}
    name={'被授权人'} type={8}/>)
  }

  renderCompany() {
    return (
      <>
        { this.renderBusiLicense() }
        { this.renderCompanyInfo() }
        { this.renderLegal() }
        {this.renderRadioSelf()}
        { this.state.filters.userRole === 1 ? null : this.renderAuth() }
      </>
    )
  };

  render() {
    return (
      <View style={styles.container}>
        <Form
          testID="form"
          ref={(ref) => this.form = ref}
        > 
        <Form.Item
            style={{ paddingVertical: 13, }}
            label={
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  width: 90,
                  marginRight: 32,
                }}
              >
                <Text style={{ color: '#212121', marginRight: 2, }}>*</Text>
                <Text>申请类型</Text>
              </View>
            }
            hasLine
          >
            <Radio
              style={styles.radioContent}
              dataOption={this.state.radioData}
              options={{ value: "value", text: "content", disabled: "disabled", }}
              selectedValue={this.state.filters.mainType}
              disabledAll={false}
              innerStyle={styles.innerStyle}
              onChange={(item) => {
                this.handleChangeFilter('mainType', item.value);
                console.log('TAGGG', `upload fifle====resp==${JSON.stringify(item)}====${this.state.filters.mainType}`);
              }}
            />
          </Form.Item>
          { this.state.filters.mainType === 3 ? this.renderPerson() : this.renderCompany() }
        </Form>
      </View>
    );
  }
}
